<template>
  <div>
    <h1>当前的值{{ count }} - {{ judge }}</h1>
    <input type="text" v-model.number="val">
    <button @click="handleIncr">+</button>
    <button @click="handleDecr">-</button>
    <button @click="handleAsync">延迟1秒加</button>
  </div>
</template>
<script>
import { mapState,mapGetters,mapActions } from 'vuex';

export default {
  name: "App",
  data() { 
    return {
      val:1
    }
  },
  methods: {
    /* handleIncr() { 
     
      this.$store.dispatch("increment",this.val);
    },
    handleDecr() { 
     
      this.$store.dispatch("decrement",this.val);
    },
    handleAsync() { 
     
      this.$store.dispatch("incrAsync",this.val);
    }, */

    ...mapActions('counter',['increment']),
    ...mapActions('counter', ['decrement']),
    ...mapActions('counter', ['incrAsync']),
    handleIncr() { 
      if (!this.val) {
        return alert("请输入数值");
      }
      if (isNaN(this.val)) {
        return alert("请输入数值");
      }
      this.increment(this.val);
      
    },
    handleDecr() { 
      if (isNaN(this.val)) {
        this.val = "";
        return alert("输入值不是数字");
      }
      this.decrement(this.val);
     
    },
    handleAsync() {
      if (isNaN(this.val)) {
        this.val = "";
        return alert("输入值不是数字");
      }
      this.incrAsync(this.val);
     }


  },
  computed: {
    //借助mapState属性生产计算属性，从state中读取数据
    ...mapState('counter',['count']),
    ...mapGetters('counter',['judge']),
    
  }
}
</script>
<style>

</style>